<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head>
	<meta charset="utf-8">
 <link rel="icon" href="https://static.jianshukeji.com/highcharts/images/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1">	<meta name="description" content="">
	<title>迷你图</title>
	<style>
	#result {
    text-align: right;
    color: gray;
    min-height: 2em;
}
#table-sparkline {
    margin: 0 auto;
    border-collapse: collapse;
}
th {
    font-weight: bold;
    text-align: left;
}
td, th {
    padding: 5px;
    border-bottom: 1px solid silver;
    height: 20px;
}
thead th {
    border-top: 2px solid gray;
    border-bottom: 2px solid gray;
}
.highcharts-tooltip>span {
    background: white;
    border: 1px solid silver;
    border-radius: 3px;
    box-shadow: 1px 1px 2px #888;
    padding: 8px;
}

	</style>
	<script src="https://img.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
	<script src="https://img.hcharts.cn/highcharts/highcharts.js"></script>
	<script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
</head>
<body>
<!--
*************************************************************************
    Generated by HCODE at 2017-05-05 15:37:57
    From: https://code.hcharts.cn/demos/hhhhDG
*************************************************************************
-->
<div id="result"></div>
<table id="table-sparkline">
    <thead>
        <tr>
            <th>国家</th>
            <th>收入</th>
            <th>季度收入</th>
            <th>消费</th>
            <th>季度消费</th>
            <th>结果</th>
            <th>季度结果</th>
        </tr>
    </thead>
    <tbody id="tbody-sparkline">
        <tr>
            <th>阿拉巴马</th>
            <td>254</td>
            <td data-sparkline="71, 78, 39, 66 "></td>
            <td>296</td>
            <td data-sparkline="68, 52, 80, 96 "></td>
            <td>-42</td>
            <td data-sparkline="3, 26, -41, -30 ; column"></td>
        </tr>
        <tr>
            <th>阿拉斯加</th>
            <td>246</td>
            <td data-sparkline="87, 44, 74, 41 "></td>
            <td>181</td>
            <td data-sparkline="29, 54, 73, 25 "></td>
            <td>65</td>
            <td data-sparkline="58, -10, 1, 16 ; column"></td>
        </tr>
        <tr>
            <th>亚利桑那</th>
            <td>101</td>
            <td data-sparkline="56, 12, 8, 25 "></td>
            <td>191</td>
            <td data-sparkline="69, 14, 53, 55 "></td>
            <td>-90</td>
            <td data-sparkline="-13, -2, -45, -30 ; column"></td>
        </tr>
        <tr>
            <th>阿肯色</th>
            <td>303</td>
            <td data-sparkline="81, 50, 78, 94 "></td>
            <td>76</td>
            <td data-sparkline="36, 15, 14, 11 "></td>
            <td>227</td>
            <td data-sparkline="45, 35, 64, 83 ; column"></td>
        </tr>
        <tr>
            <th>加利福尼亚</th>
            <td>200</td>
            <td data-sparkline="61, 80, 10, 49 "></td>
            <td>217</td>
            <td data-sparkline="100, 8, 52, 57 "></td>
            <td>-17</td>
            <td data-sparkline="-39, 72, -42, -8 ; column"></td>
        </tr>
        <tr>
            <th>科罗拉多</th>
            <td>118</td>
            <td data-sparkline="13, 48, 21, 36 "></td>
            <td>273</td>
            <td data-sparkline="98, 86, 8, 81 "></td>
            <td>-155</td>
            <td data-sparkline="-85, -38, 13, -45 ; column"></td>
        </tr>
        <tr>
            <th>康涅狄格州</th>
            <td>201</td>
            <td data-sparkline="6, 64, 44, 87 "></td>
            <td>148</td>
            <td data-sparkline="60, 13, 73, 2 "></td>
            <td>53</td>
            <td data-sparkline="-54, 51, -29, 85 ; column"></td>
        </tr>
        <tr>
            <th>特拉华</th>
            <td>161</td>
            <td data-sparkline="7, 27, 49, 78 "></td>
            <td>298</td>
            <td data-sparkline="19, 90, 100, 89 "></td>
            <td>-137</td>
            <td data-sparkline="-12, -63, -51, -11 ; column"></td>
        </tr>
        <tr>
            <th>哥伦比亚特区</th>
            <td>106</td>
            <td data-sparkline="18, 39, 27, 22 "></td>
            <td>185</td>
            <td data-sparkline="62, 97, 24, 2 "></td>
            <td>-79</td>
            <td data-sparkline="-44, -58, 3, 20 ; column"></td>
        </tr>
        <tr>
            <th>佛罗里达</th>
            <td>249</td>
            <td data-sparkline="51, 24, 90, 84 "></td>
            <td>244</td>
            <td data-sparkline="47, 40, 74, 83 "></td>
            <td>5</td>
            <td data-sparkline="4, -16, 16, 1 ; column"></td>
        </tr>
        <tr>
            <th>佐治亚州</th>
            <td>183</td>
            <td data-sparkline="36, 80, 39, 28 "></td>
            <td>212</td>
            <td data-sparkline="43, 25, 52, 92 "></td>
            <td>-29</td>
            <td data-sparkline="-7, 55, -13, -64 ; column"></td>
        </tr>
        <tr>
            <th>夏威夷州</th>
            <td>232</td>
            <td data-sparkline="73, 34, 74, 51 "></td>
            <td>172</td>
            <td data-sparkline="1, 83, 49, 39 "></td>
            <td>60</td>
            <td data-sparkline="72, -49, 25, 12 ; column"></td>
        </tr>
        <tr>
            <th>爱达荷州</th>
            <td>166</td>
            <td data-sparkline="25, 43, 31, 67 "></td>
            <td>152</td>
            <td data-sparkline="30, 30, 75, 17 "></td>
            <td>14</td>
            <td data-sparkline="-5, 13, -44, 50 ; column"></td>
        </tr>
        <tr>
            <th>伊利诺伊州</th>
            <td>336</td>
            <td data-sparkline="56, 84, 98, 98 "></td>
            <td>151</td>
            <td data-sparkline="61, 12, 77, 1 "></td>
            <td>185</td>
            <td data-sparkline="-5, 72, 21, 97 ; column"></td>
        </tr>
        <tr>
            <th>印第安纳州</th>
            <td>216</td>
            <td data-sparkline="52, 87, 64, 13 "></td>
            <td>216</td>
            <td data-sparkline="2, 47, 94, 73 "></td>
            <td>0</td>
            <td data-sparkline="50, 40, -30, -60 ; column"></td>
        </tr>
        <tr>
            <th>爱荷华州</th>
            <td>135</td>
            <td data-sparkline="41, 45, 19, 30 "></td>
            <td>159</td>
            <td data-sparkline="17, 34, 45, 63 "></td>
            <td>-24</td>
            <td data-sparkline="24, 11, -26, -33 ; column"></td>
        </tr>
        <tr>
            <th>堪萨斯州</th>
            <td>184</td>
            <td data-sparkline="52, 43, 65, 24 "></td>
            <td>215</td>
            <td data-sparkline="20, 42, 97, 56 "></td>
            <td>-31</td>
            <td data-sparkline="32, 1, -32, -32 ; column"></td>
        </tr>
        <tr>
            <th>肯塔基州</th>
            <td>289</td>
            <td data-sparkline="85, 74, 98, 32 "></td>
            <td>219</td>
            <td data-sparkline="37, 38, 93, 51 "></td>
            <td>70</td>
            <td data-sparkline="48, 36, 5, -19 ; column"></td>
        </tr>
        <tr>
            <th>路易斯安那州</th>
            <td>257</td>
            <td data-sparkline="89, 18, 87, 63 "></td>
            <td>201</td>
            <td data-sparkline="19, 54, 35, 93 "></td>
            <td>56</td>
            <td data-sparkline="70, -36, 52, -30 ; column"></td>
        </tr>
        <tr>
            <th>缅因州</th>
            <td>194</td>
            <td data-sparkline="17, 68, 61, 48 "></td>
            <td>133</td>
            <td data-sparkline="44, 35, 42, 12 "></td>
            <td>61</td>
            <td data-sparkline="-27, 33, 19, 36 ; column"></td>
        </tr>
        <tr>
            <th>马里兰州</th>
            <td>204</td>
            <td data-sparkline="74, 12, 74, 44 "></td>
            <td>157</td>
            <td data-sparkline="65, 58, 22, 12 "></td>
            <td>47</td>
            <td data-sparkline="9, -46, 52, 32 ; column"></td>
        </tr>
        <tr>
            <th>马萨诸塞州</th>
            <td>172</td>
            <td data-sparkline="44, 35, 69, 24 "></td>
            <td>115</td>
            <td data-sparkline="26, 3, 69, 17 "></td>
            <td>57</td>
            <td data-sparkline="18, 32, 0, 7 ; column"></td>
        </tr>
        <tr>
            <th>密歇根州</th>
            <td>177</td>
            <td data-sparkline="99, 26, 13, 39 "></td>
            <td>185</td>
            <td data-sparkline="20, 37, 99, 29 "></td>
            <td>-8</td>
            <td data-sparkline="79, -11, -86, 10 ; column"></td>
        </tr>
        <tr>
            <th>明尼苏达州</th>
            <td>99</td>
            <td data-sparkline="34, 30, 16, 19 "></td>
            <td>137</td>
            <td data-sparkline="49, 43, 24, 21 "></td>
            <td>-38</td>
            <td data-sparkline="-15, -13, -8, -2 ; column"></td>
        </tr>
        <tr>
            <th>密西西比州</th>
            <td>205</td>
            <td data-sparkline="38, 75, 31, 61 "></td>
            <td>179</td>
            <td data-sparkline="0, 68, 100, 11 "></td>
            <td>26</td>
            <td data-sparkline="38, 7, -69, 50 ; column"></td>
        </tr>
        <tr>
            <th>密苏里州</th>
            <td>135</td>
            <td data-sparkline="37, 48, 2, 48 "></td>
            <td>202</td>
            <td data-sparkline="41, 64, 17, 80 "></td>
            <td>-67</td>
            <td data-sparkline="-4, -16, -15, -32 ; column"></td>
        </tr>
        <tr>
            <th>蒙大拿州</th>
            <td>195</td>
            <td data-sparkline="48, 81, 38, 28 "></td>
            <td>237</td>
            <td data-sparkline="44, 33, 86, 74 "></td>
            <td>-42</td>
            <td data-sparkline="4, 48, -48, -46 ; column"></td>
        </tr>
        <tr>
            <th>内布拉斯加州</th>
            <td>286</td>
            <td data-sparkline="98, 55, 82, 51 "></td>
            <td>232</td>
            <td data-sparkline="89, 54, 28, 61 "></td>
            <td>54</td>
            <td data-sparkline="9, 1, 54, -10 ; column"></td>
        </tr>
        <tr>
            <th>内华达州</th>
            <td>221</td>
            <td data-sparkline="66, 4, 57, 94 "></td>
            <td>214</td>
            <td data-sparkline="59, 39, 94, 22 "></td>
            <td>7</td>
            <td data-sparkline="7, -35, -37, 72 ; column"></td>
        </tr>
        <tr>
            <th>新罕布什尔州</th>
            <td>136</td>
            <td data-sparkline="32, 21, 1, 82 "></td>
            <td>306</td>
            <td data-sparkline="88, 85, 65, 68 "></td>
            <td>-170</td>
            <td data-sparkline="-56, -64, -64, 14 ; column"></td>
        </tr>
        <tr>
            <th>新泽西州</th>
            <td>194</td>
            <td data-sparkline="31, 40, 24, 99 "></td>
            <td>147</td>
            <td data-sparkline="7, 45, 12, 83 "></td>
            <td>47</td>
            <td data-sparkline="24, -5, 12, 16 ; column"></td>
        </tr>
        <tr>
            <th>新墨西哥州</th>
            <td>207</td>
            <td data-sparkline="66, 93, 18, 30 "></td>
            <td>261</td>
            <td data-sparkline="97, 28, 79, 57 "></td>
            <td>-54</td>
            <td data-sparkline="-31, 65, -61, -27 ; column"></td>
        </tr>
        <tr>
            <th>纽约</th>
            <td>316</td>
            <td data-sparkline="48, 95, 76, 97 "></td>
            <td>193</td>
            <td data-sparkline="68, 5, 97, 23 "></td>
            <td>123</td>
            <td data-sparkline="-20, 90, -21, 74 ; column"></td>
        </tr>
        <tr>
            <th>北卡罗来纳州</th>
            <td>175</td>
            <td data-sparkline="31, 71, 2, 71 "></td>
            <td>188</td>
            <td data-sparkline="93, 5, 81, 9 "></td>
            <td>-13</td>
            <td data-sparkline="-62, 66, -79, 62 ; column"></td>
        </tr>
        <tr>
            <th>北达科他州</th>
            <td>181</td>
            <td data-sparkline="3, 90, 62, 26 "></td>
            <td>288</td>
            <td data-sparkline="70, 63, 82, 73 "></td>
            <td>-107</td>
            <td data-sparkline="-67, 27, -20, -47 ; column"></td>
        </tr>
        <tr>
            <th>俄亥俄州</th>
            <td>189</td>
            <td data-sparkline="70, 50, 6, 63 "></td>
            <td>163</td>
            <td data-sparkline="21, 94, 4, 44 "></td>
            <td>26</td>
            <td data-sparkline="49, -44, 2, 19 ; column"></td>
        </tr>
        <tr>
            <th>俄克拉荷马</th>
            <td>188</td>
            <td data-sparkline="66, 46, 53, 23 "></td>
            <td>172</td>
            <td data-sparkline="26, 25, 35, 86 "></td>
            <td>16</td>
            <td data-sparkline="40, 21, 18, -63 ; column"></td>
        </tr>
        <tr>
            <th>俄勒冈</th>
            <td>165</td>
            <td data-sparkline="82, 31, 38, 14 "></td>
            <td>257</td>
            <td data-sparkline="91, 9, 80, 77 "></td>
            <td>-92</td>
            <td data-sparkline="-9, 22, -42, -63 ; column"></td>
        </tr>
        <tr>
            <th>宾夕法尼亚州</th>
            <td>268</td>
            <td data-sparkline="33, 88, 82, 65 "></td>
            <td>129</td>
            <td data-sparkline="30, 29, 41, 29 "></td>
            <td>139</td>
            <td data-sparkline="3, 59, 41, 36 ; column"></td>
        </tr>
        <tr>
            <th>罗德岛州</th>
            <td>164</td>
            <td data-sparkline="8, 86, 32, 38 "></td>
            <td>182</td>
            <td data-sparkline="88, 8, 18, 68 "></td>
            <td>-18</td>
            <td data-sparkline="-80, 78, 14, -30 ; column"></td>
        </tr>
        <tr>
            <th>南卡莱罗纳州</th>
            <td>91</td>
            <td data-sparkline="24, 18, 0, 49 "></td>
            <td>193</td>
            <td data-sparkline="72, 62, 21, 38 "></td>
            <td>-102</td>
            <td data-sparkline="-48, -44, -21, 11 ; column"></td>
        </tr>
        <tr>
            <th>南达科他</th>
            <td>184</td>
            <td data-sparkline="73, 17, 64, 30 "></td>
            <td>221</td>
            <td data-sparkline="21, 91, 57, 52 "></td>
            <td>-37</td>
            <td data-sparkline="52, -74, 7, -22 ; column"></td>
        </tr>
        <tr>
            <th>田纳西州</th>
            <td>233</td>
            <td data-sparkline="92, 24, 25, 92 "></td>
            <td>131</td>
            <td data-sparkline="5, 18, 42, 66 "></td>
            <td>102</td>
            <td data-sparkline="87, 6, -17, 26 ; column"></td>
        </tr>
        <tr>
            <th>德克萨斯州</th>
            <td>211</td>
            <td data-sparkline="33, 80, 68, 30 "></td>
            <td>225</td>
            <td data-sparkline="86, 58, 36, 45 "></td>
            <td>-14</td>
            <td data-sparkline="-53, 22, 32, -15 ; column"></td>
        </tr>
        <tr>
            <th>犹他州</th>
            <td>362</td>
            <td data-sparkline="89, 98, 96, 79 "></td>
            <td>225</td>
            <td data-sparkline="35, 51, 88, 51 "></td>
            <td>137</td>
            <td data-sparkline="54, 47, 8, 28 ; column"></td>
        </tr>
        <tr>
            <th>佛蒙特州</th>
            <td>119</td>
            <td data-sparkline="4, 19, 56, 40 "></td>
            <td>152</td>
            <td data-sparkline="17, 66, 27, 42 "></td>
            <td>-33</td>
            <td data-sparkline="-13, -47, 29, -2 ; column"></td>
        </tr>
        <tr>
            <th>维吉尼亚州</th>
            <td>127</td>
            <td data-sparkline="24, 27, 41, 35 "></td>
            <td>71</td>
            <td data-sparkline="30, 2, 36, 3 "></td>
            <td>56</td>
            <td data-sparkline="-6, 25, 5, 32 ; column"></td>
        </tr>
        <tr>
            <th>华盛顿</th>
            <td>165</td>
            <td data-sparkline="40, 11, 63, 51 "></td>
            <td>245</td>
            <td data-sparkline="46, 41, 94, 64 "></td>
            <td>-80</td>
            <td data-sparkline="-6, -30, -31, -13 ; column"></td>
        </tr>
        <tr>
            <th>西弗吉尼亚州</th>
            <td>248</td>
            <td data-sparkline="66, 56, 97, 29 "></td>
            <td>171</td>
            <td data-sparkline="65, 53, 37, 16 "></td>
            <td>77</td>
            <td data-sparkline="1, 3, 60, 13 ; column"></td>
        </tr>
        <tr>
            <th>威斯康星</th>
            <td>183</td>
            <td data-sparkline="24, 55, 21, 83 "></td>
            <td>224</td>
            <td data-sparkline="80, 64, 13, 67 "></td>
            <td>-41</td>
            <td data-sparkline="-56, -9, 8, 16 ; column"></td>
        </tr>
        <tr>
            <th>怀俄明州</th>
            <td>231</td>
            <td data-sparkline="52, 49, 97, 33 "></td>
            <td>251</td>
            <td data-sparkline="96, 50, 23, 82 "></td>
            <td>-20</td>
            <td data-sparkline="-44, -1, 74, -49 ; column"></td>
        </tr>
    </tbody>
</table>

	<script>
	$(function () {
    /**
     * Create a constructor for sparklines that takes some sensible defaults and merges in the individual
     * chart options. This function is also available from the jQuery plugin as $(element).highcharts('SparkLine').
     */
    Highcharts.SparkLine = function (a, b, c) {
        var hasRenderToArg = typeof a === 'string' || a.nodeName,
            options = arguments[hasRenderToArg ? 1 : 0],
            defaultOptions = {
                chart: {
                    renderTo: (options.chart && options.chart.renderTo) || this,
                    backgroundColor: null,
                    borderWidth: 0,
                    type: 'area',
                    margin: [2, 0, 2, 0],
                    width: 120,
                    height: 20,
                    style: {
                        overflow: 'visible'
                    },
                    skipClone: true
                },
                title: {
                    text: ''
                },
                credits: {
                    enabled: false
                },
                xAxis: {
                    labels: {
                        enabled: false
                    },
                    title: {
                        text: null
                    },
                    startOnTick: false,
                    endOnTick: false,
                    tickPositions: []
                },
                yAxis: {
                    endOnTick: false,
                    startOnTick: false,
                    labels: {
                        enabled: false
                    },
                    title: {
                        text: null
                    },
                    tickPositions: [0]
                },
                legend: {
                    enabled: false
                },
                tooltip: {
                    backgroundColor: null,
                    borderWidth: 0,
                    shadow: false,
                    useHTML: true,
                    hideDelay: 0,
                    shared: true,
                    padding: 0,
                    positioner: function (w, h, point) {
                        return { x: point.plotX - w / 2, y: point.plotY - h };
                    }
                },
                plotOptions: {
                    series: {
                        animation: false,
                        lineWidth: 1,
                        shadow: false,
                        states: {
                            hover: {
                                lineWidth: 1
                            }
                        },
                        marker: {
                            radius: 1,
                            states: {
                                hover: {
                                    radius: 2
                                }
                            }
                        },
                        fillOpacity: 0.25
                    },
                    column: {
                        negativeColor: '#910000',
                        borderColor: 'silver'
                    }
                }
            };
        options = Highcharts.merge(defaultOptions, options);
        return hasRenderToArg ?
            new Highcharts.Chart(a, options, c) :
        new Highcharts.Chart(options, b);
    };
    var start = +new Date(),
        $tds = $('td[data-sparkline]'),
        fullLen = $tds.length,
        n = 0;
    // Creating 153 sparkline charts is quite fast in modern browsers, but IE8 and mobile
    // can take some seconds, so we split the input into chunks and apply them in timeouts
    // in order avoid locking up the browser process and allow interaction.
    function doChunk() {
        var time = +new Date(),
            i,
            len = $tds.length,
            $td,
            stringdata,
            arr,
            data,
            chart;
        for (i = 0; i < len; i += 1) {
            $td = $($tds[i]);
            stringdata = $td.data('sparkline');
            arr = stringdata.split('; ');
            data = $.map(arr[0].split(', '), parseFloat);
            chart = {};
            if (arr[1]) {
                chart.type = arr[1];
            }
            $td.highcharts('SparkLine', {
                series: [{
                    data: data,
                    pointStart: 1
                }],
                tooltip: {
                    headerFormat: '<span>' + $td.parent().find('th').html() + ', Q{point.x}:</span><br/>',
                    pointFormat: '<b>{point.y}.000</b> USD'
                },
                chart: chart
            });
            n += 1;
            // If the process takes too much time, run a timeout to allow interaction with the browser
            if (new Date() - time > 500) {
                $tds.splice(0, i + 1);
                setTimeout(doChunk, 0);
                break;
            }
            // Print a feedback on the performance
            if (n === fullLen) {
                $('#result').html('生成' + fullLen + '个迷你图用了 ' + (new Date() - start) + ' ms');
            }
        }
    }
    doChunk();
});
</script>

</body></html>